<template>
  <view
    class="refresh_box"
    :style="{
      opacity: `${props.opacity}%`,
      zIndex: props.opacity > 1 ? 99 : -1,
    }"
  >

    <uni-load-more
      status="loading"
      iconType="circle"
      :showText="false"
      color="#007AFF"
      v-if="props.enbleAnim"
    />
    <uni-icons type="refreshempty" size="30" v-else />

    
  </view>
</template>

<!-- 下拉刷新组件 -->
<script lang="ts" setup>
import uniLoadMore from '../uni-load-more/uni-load-more.vue'

//接受父组件传递参数
const props = defineProps({
  /**
   * 透明底值
   */
  opacity: {
    type: Number,
    default: 0,
  },
  /**
   * 是否开启开启动画
   */
  enbleAnim: {
    type: Boolean,
    default: false,
  },
})
</script>

<style scoped lang="scss">
.refresh_box {
  position: fixed;
  width: 80rpx;
  height: 80rpx;
  background-color: $uni-bg-color;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  transition: all 0.2s;
  top: 20%;
  left: 50%;
  margin-top: -40rpx;
  margin-left: -40rpx;
  opacity: 0;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
</style>
